<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-content">
		
			<ul class="mui-table-view" id="ul_notice_list" style="margin-bottom: 10px;">
				<!-- <li class="btnOper mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img style="max-width: 60px; height: 60px;" class="mui-media-object mui-pull-left" src="../../images/1.jpg">
						<span style="margin-top: 15px;" id="span_nickname" class="mui-pull-right">
							<button type="button" class="passRequest mui-btn mui-btn-red"
								style="padding: 4px 10px;">删除</button>
							<button id="materia_content" type="button" class="passRequest mui-btn mui-btn-green"
								style="padding: 4px 10px;">查看</button>
						</span>
						<div class="mui-media-body">
							<label>公告标题:XXX</label> 
							<p class="mui-ellipsis">发布日期:2021-03-08 12:20:31</p>
							<p class="mui-ellipsis">发布人:2021-03-08 12:20:31</p>
						</div>
					</a>
				</li> -->
			</ul>
		
		</div>
		
		<script src="../../js/mui.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init()
			
			mui.plusReady(function() {
				// 资料内容
				// document.getElementById("materia_content").addEventListener('tap', function() {
				// 	var btnArray = ['关闭'];
				// 	mui.confirm('资料内容', '标题', btnArray, function(e) {})
				// });
				
				loadingNoticeList();
			})
			
			// 加载公告列表
			function loadingNoticeList(){
				
				mui.ajax(app.serverUrl + "/user/admin/query_notice_all", {
					data: {},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						
						var ul_notice_list = document.getElementById("ul_notice_list");
						
						if (data.status == 200) {
							var noriceInfoList = data.data;
							
							if (noriceInfoList != null && noriceInfoList.length > 0) {
								var notice_list_html = "";
								for (var i = 0; i < noriceInfoList.length; i++) {
									notice_list_html += noticeListHtml(noriceInfoList[i]);
								}
								ul_notice_list.innerHTML = notice_list_html;
							} else {
								ul_notice_list.innerHTML = "";
							}
						} else {
							app.showToast("获取数据失败，请重试！", "error");
						}
						
						//动态对删除按钮进行事件绑定
						mui(".btnOper").on("tap", ".deleteNotice", function(e) {
							var n_id = this.getAttribute("n_id");
							mui.ajax(app.serverUrl + "/user/admin/delete_notice?n_id=" + n_id, {
								data: {},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/json'
								},
								success: function(data) {
									if (data.status == 200) {
										app.showToast("成功删除公告！", "success");
										loadingNoticeList();
									} else {
										app.showToast("获取数据失败，请重试！", "error");
									}
								}
							});
						});
						
						//动态对查看按钮进行事件绑定
						mui(".btnOper").on("tap", ".seeNotice", function(e) {
							
							var title = this.getAttribute("title");
							var content = this.getAttribute("content");
							
							noticeDetail(content,title);
						});
						
					}
				});
				
			}
			
			// 显示公告详情
			function noticeDetail(n_content,n_title) {
				var btnArray = ['关闭'];
				mui.confirm(n_content, n_title, btnArray, function(e) {})
			}
			
			// 公告列表 HTML
			function noticeListHtml(noticeInfo){
				var html = "";
				html = '<li class="btnOper mui-table-view-cell mui-media">' +
					'<a href="javascript:;">' +
						'<img style="max-width: 60px; height: 60px;" class="mui-media-object mui-pull-left" src="../../images/gonggao.jpg">' +
						'<span style="margin-top: 15px;" id="span_nickname" class="mui-pull-right">' +
							'<button n_id="' + noticeInfo.n_id + '" type="button" class="deleteNotice mui-btn mui-btn-red"' +
								'style="padding: 4px 10px;">删除</button>' +
							'<button content="' + noticeInfo.n_content + '" title="' + noticeInfo.n_title + '" type="button" class="seeNotice mui-btn mui-btn-green"' +
								'style="padding: 4px 10px;margin-left: 4px;">查看</button>' +
						'</span>' +
						'<div class="mui-media-body">' +
							'<label>公告标题:' + noticeInfo.n_title + '</label> ' +
							'<p class="mui-ellipsis">发布人:' + noticeInfo.n_t_name + '</p>' +
							'<p class="mui-ellipsis">发布日期:' + noticeInfo.n_date_str + '</p>' +
						'</div>' +
					'</a>' +
				'</li>';
				return html;
			}
		</script>
	</body>

</html>
